<%@ page import="com.fduss.artStore.entity.Artwork" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: duocai wu
  Date: 2017/6/23
  Time: 16:22
--%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <%--<link rel="icon" href="./favicon.ico">--%>
    <title>Art Store</title>
    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/carousel.css" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<jsp:useBean id="artworkService" scope="session" class="com.fduss.artStore.service.impl.ArtworkServiceImpl"/>
<%
    String artworkBase = "./art-images/works/large/";
    String artworkSmallBase = "./art-images/works/small/";
    String suffix = ".jpg";
    int artworkCount = artworkService.getCount();
    int pageSize = 10;
    int totalPageNum = (artworkCount + 1) / 10;
    int curPage;
    try {
        String curPageStr = request.getParameter("page");
        curPage = curPageStr != null ? Integer.parseInt(curPageStr) : 0;
    } catch (Exception e) {
        curPage = 0;
    }
    List<Artwork> hotList = artworkService.getSome(3);
    List<Artwork> hotList2 = artworkService.getSome(3);
    List<Artwork> curPageList = artworkService.getOnePage(curPage, pageSize);
%>

<%--header bar--%>
<%@include file="header.jsp" %>

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <%--图片内容--%>
    <div class="carousel-inner" role="listbox">
        <%
            int index = -1;
            String[] classes = {"first-slide", "second-slide", "third-slide"};
            for (Artwork artwork : hotList) {
                index++;
                if (index == 0) {
        %>
        <div class="item active">
            <%} else {%>
            <div class="item">
                <% } %>
                <img width="100%" class="<%=classes[index]%>"
                     src="<%=artworkBase+artwork.getImageFileName()+suffix%>"
                     alt="slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1><%=artwork.getTitle()%>
                        </h1>
                        <p>
                            <%=artwork.getDescription()!=null? artwork.getDescription():artwork.getDefaultDescription()%>
                        </p>
                        <p><a class="btn btn-lg btn-primary" href="./artworkDetail.jsp?id=<%=artwork.getArtWorkId()%>"
                              role="button">See Details</a></p>
                    </div>
                </div>
            </div>
            <% } %>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- /.carousel -->


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
            <% for (Artwork artwork : hotList2) { %>
            <div class="col-lg-4">
                <img class="img-circle"
                     src="<%=artworkSmallBase+artwork.getImageFileName()+suffix%>"
                     alt="Generic placeholder image" width="140" height="140">
                <h2><%=artwork.getTitle()%>
                </h2>
                <p>
                    <%=artwork.getDescription()!=null? artwork.getDescription():artwork.getDefaultDescription()%>
                </p>
                <p><a class="btn btn-default" href="./artworkDetail.jsp?id=<%=artwork.getArtWorkId()%>" role="button">View
                    details &raquo;</a></p>
            </div><!-- /.col-lg-4 -->
            <% } %>
        </div>

        <!-- START THE FEATURETTES -->
        <hr id="artwork_list">
        <% for (int i = 0; i < pageSize; i++) {
            Artwork artwork = curPageList.get(i);
        %>
        <h2 class="featurette-heading">
            <%=curPage * pageSize + i + 1 + "." + artwork.getTitle()%>
        </h2>
        <div class="row featurette">
            <div class="col-md-7 col-md-push-5">
                <p class="lead">
                    <%=artwork.getDescription()!=null? artwork.getDescription():artwork.getDefaultDescription()%>
                </p>
                <p>
                    Google Link:
                    <a href="<%=artwork.getGoogleLink() != null ? artwork.getGoogleLink():"#"%>">
                        <%=artwork.getGoogleLink() != null ? artwork.getGoogleLink():""%></a>
                </p>
                <p>
                    Artwork Link:
                    <a href="<%=artwork.getArtWorkLink() != null ? artwork.getArtWorkLink():"#"%>">
                        <%=artwork.getArtWorkLink() != null ? artwork.getArtWorkLink():""%></a>
                </p>
                <p class="text-center">
                    <a class="btn btn-default" href="./artworkDetail.jsp?id=<%=artwork.getArtWorkId()%>" role="button">View
                    details &raquo;</a></p>
            </div>
            <div class="col-md-5 col-md-pull-7">
                <img id="image" width="500" height="500" class="featurette-image img-responsive center-block"
                     src="<%=artworkBase+artwork.getImageFileName()+suffix%>"
                     alt="Generic placeholder image">
            </div>
        </div>
        <% } %>
        <%--分页--%>
        <div class="text-center">
            <ul class="pagination">
                <li><a href="./index.jsp?page=<%=curPage>0?curPage-1:0%>">&laquo;</a></li>
                <% for (int i = 0; i < totalPageNum; i++) {
                    if (curPage == i) {
                %>
                <li class="active"><a href="#artwork_list"><%=i%>
                </a></li>
                <% } else { %>
                <li><a href="./index.jsp?page=<%=i%>"><%=i%>
                </a></li>
                <% } %>
                <% }%>
                <li>
                    <a href="./index.jsp?page=<%=curPage<totalPageNum-1?curPage+1:totalPageNum-1%>">&raquo;</a>
                </li>
            </ul>
        </div>

        <hr class="featurette-divider">
        <!-- /END THE FEATURETTES -->
    </div><!-- /.container -->

    <%@include file="footer.jsp" %>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
